<link rel="stylesheet" href="../../css/element.css">
<link rel="stylesheet" href="../../css/main.css">

<!-- 引入组件库 -->
<script type="text/javascript" src="../../js/vue.min.js"></script>
<script src="../../js/element.js"></script>
<script src="../../js/common.js"></script>

<!-- 模型一 -->
<div id="listNode" class="layout">
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/' }">模型</el-breadcrumb-item>
    <el-breadcrumb-item>表格</el-breadcrumb-item>
  </el-breadcrumb>
  <p><el-link target="_blank" type="success" href="https://element.eleme.cn/#/zh-CN/component/table">文档地址</el-link></p>
  <p>:row-style和:cell-style控制行列样式，支持行列冻结，多行多列映射单行当列</p>
  <el-table :data="tableData" border :cell-style="tableRowStyle" :header-cell-style="tableHeaderColor">
    <el-table-column prop="serverName" label="服务名" ></el-table-column>
    <el-table-column prop="serverVersion" label="服务版本" ></el-table-column>
    <el-table-column prop="serverExplain" label="服务描述" ></el-table-column>
    <el-table-column fixed="right" label="操作" >
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text">查看</el-button>
        <el-button type="text" >编辑</el-button>
      </template>
    </el-table-column>
  </el-table>

  <div style="text-align: right;margin-top: 20px;font-size: 14px;">
    <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage4"
    :page-sizes="[10, 20, 30, 40]"
    :page-size="10"
    layout="total, sizes, prev, pager, next, jumper"
    :total="400">
  </el-pagination>
  </div>

  <el-table :data="tableData"  border :row-style="{height: '0'}" :cell-style="{padding: '0'}" :header-cell-style="tableHeaderColor">
    <el-table-column prop="serverName" label="服务名" ></el-table-column>
    <el-table-column prop="serverVersion" label="服务版本" ></el-table-column>
    <el-table-column prop="serverExplain" label="服务描述" ></el-table-column>
    <el-table-column fixed="right" label="操作" >
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text">查看</el-button>
        <el-button type="text" >编辑</el-button>
      </template>
    </el-table-column>
  </el-table>

  <div style="text-align: right;margin-top: 20px;font-size: 14px;">
    <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage4"
    :page-sizes="[10, 20, 30, 40]"
    :page-size="10"
    layout="total, sizes, prev, pager, next, jumper"
    :total="400">
  </el-pagination>
  </div>
  
</div>


<script>

var Main =  {
    data() {
      return {
        tableData: [{
          serverName: '服务一',
          serverVersion:"1.1.0",
          serverExplain:"ftp_client服务"
        }, {
          serverName: '服务二',
          serverVersion:"1.0",
          serverExplain:"ftp_server服务"
        }, {
          serverName: '服务三',
          serverVersion:"1.1.0.0",
          serverExplain:"ftp服务"
        }, {
          serverName: '服务四',
          serverVersion:"1.1.0.1",
          serverExplain:"ftp服务"
        }, {
          serverName: '服务四',
          serverVersion:"1.1.0.1",
          serverExplain:"ftp服务"
        }, {
          serverName: '服务四',
          serverVersion:"1.1.0.1",
          serverExplain:"ftp服务"
        }, {
          serverName: '服务四',
          serverVersion:"1.1.0.1",
          serverExplain:"ftp服务"
        }, {
          serverName: '服务四',
          serverVersion:"1.1.0.1",
          serverExplain:"ftp服务"
        }, {
          serverName: '服务四',
          serverVersion:"1.1.0.1",
          serverExplain:"ftp服务"
        }],
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4
      }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      handleClick(row) {
        console.log(row);
      },
       //设置表格行的样式
       tableRowStyle({row,rowIndex}){
          return 'font-size:14px;row-height:20px'
      },
       //设置表头行的样式
       tableHeaderColor({row,column,rowIndex,columnIndex}){
          return 'font-size:14px;color: #606266;'
      }
    }
  }
  var Ctor = Vue.extend(Main)
new Ctor().$mount('#listNode')
  
</script>
